<template>
	<el-container>
		<el-main class="nopadding">
			<div id="clock">
				<div style="background-color: #409eff;">
					<p class="date">{{ date }}</p>
					<p class="time">{{ time }}</p>
				</div>
			</div>
			<el-row :gutter="20" style="margin-top:20px;">
				<el-col :span="6" :offset="6" @click="doAttend('1')">
					<div style="cursor:pointer;text-align: center;line-height: 100px;height: 100px;font-weight: 600;font-size: 20px;background-color: var(--el-color-danger);color: #ffffff;">
					上班打卡
					<span style="text-align: center;font-size: 14px;">{{attendConfig.beginTime}}{{onStatus=='1'?'(已打卡)':''}}</span>
				</div></el-col>
				<el-col :span="6" @click="doAttend('2')"><div style="cursor:pointer;text-align: center;line-height: 100px;height: 100px;font-weight: 600;font-size: 20px;background-color: var(--el-color-success);color: #ffffff;">下班打卡
					<span style="text-align: center;font-size: 14px;">{{attendConfig.endTime}}{{offStatus=='1'?'(已打卡)':''}}</span>
				</div></el-col>
			</el-row>
		</el-main>
	</el-container>
	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></save-dialog>
</template>
<script>
import saveDialog from './attendSave'
export default {
	components: {
		saveDialog,
	},
	data() {
		return {
			dialog: {
				save: false,
			},
			attendConfig:{
			},
			onStatus:1,
			offStatus:1,
			time: '',
			date: '',
			timerID: setInterval(this.updateTime, 1000),
			week: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
		}
	},
	mounted() {
		this.getAttendConfig();
		this.getAttendStatusDay();
		this.getOffWorkAttendStatusDay();
	},
	methods: {
		updateTime() {
			var cd = new Date();
			this.time = this.zeroPadding(cd.getHours(), 2) + ':' + this.zeroPadding(cd.getMinutes(), 2) + ':' + this.zeroPadding(cd.getSeconds(), 2);
			this.date = this.zeroPadding(cd.getFullYear(), 4) + '-' + this.zeroPadding(cd.getMonth() + 1, 2) + '-' + this.zeroPadding(cd.getDate(), 2) + ' ' + this.week[cd.getDay()];
		},
		zeroPadding(num, digit) {
			var zero = '';
			for (var i = 0; i < digit; i++) {
				zero += '0';
			}
			return (zero + num).slice(-digit);
		},
		async getAttendConfig()
		{
			var res = await this.$API.system.attendConfig.getAttendConfigById.get({configId:this.$TOOL.data.get("USER_INFO").attend});
			if (res.code == 200) {
				this.attendConfig = res.data;
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		async getAttendStatusDay()
		{
			var res = await this.$API.office.attend.getAttendStatusDay.get();
			if (res.code == 200) {
				this.onStatus = res.data.status;
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		async getOffWorkAttendStatusDay()
		{
			var res = await this.$API.office.attend.getOffWorkAttendStatusDay.get();
			if (res.code == 200) {
				this.offStatus = res.data.status;
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		doAttend(status) {
			if(status=="1")
			{
				if(this.onStatus=='1')
				{
					this.$alert('不能重复打卡', "提示", {type: 'error'})
				}else {
					this.dialog.save = true
					this.$nextTick(() => {
						this.$refs.saveDialog.open().setData({status:status});
					})
				}
			}else if(status=="2")
			{
				if(this.offStatus=='1')
				{
					this.$alert('不能重复打卡', "提示", {type: 'error'})
				}else {
					this.dialog.save = true
					this.$nextTick(() => {
						this.$refs.saveDialog.open().setData({status:status});
					})
				}
			}
		},
		//本地更新数据
		handleSaveSuccess(data) {
			if(data=="2")
			{
				this.offStatus='1'
			}else if(data=="1"){
				this.onStatus = "1"
			}
		},
	}
}
</script>
<style scoped>

#clock {
	height: 160px;
	padding:10px;
	font-family: 'Share Tech Mono', monospace;
	color: #ffffff;
	text-align: center;
	display: contents;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	color: #daf6ff;
	text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
}

#clock .time {
	letter-spacing: 0.05em;
	font-size: 80px;
	padding: 5px 0;
}

#clock .date {
	letter-spacing: 0.1em;
	font-size: 24px;
}

</style>
